<template>
  <div class="home-list">
    <div class="list-title"
         border-bottom-1px>
      <div class="title-desc">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-touxiang"></use>
        </svg>
        <p>TA们正在出借...</p>
      </div>
      <div class="refresh"
           @click="handleRefresh">
        <i class="iconfont"
           ref="icon"
           :class="{rotate: isRotate}">&#xe600;</i>
        <p>换一批</p>
      </div>
    </div>
    <ul class="list">
      <li class="item"
          v-for="item of list"
          :key="item.id">
        <div class="icon-box">
          <svg class="icon"
               aria-hidden="true">
            <use xlink:href="#icon-touxiang"></use>
          </svg>
        </div>
        <div class="right"
             border-bottom-1px>
          <div class="name">{{item.username}}</div>
          <div class="money-num">{{item.amount}}</div>
          <div class="rent"
               border-radius
               @click="handleBorrow">找TA借</div>
        </div>
      </li>
    </ul>
    <ul class="icon-list">
      <li class="icon-item">
        <i class="iconfont icon-jisufangkuan"></i>
        <p class="icon-desc">极速匹配</p>
      </li>
      <li class="icon-item">
        <i class="iconfont icon-anquan"></i>
        <p class="icon-desc">资料安全</p>
      </li>
      <li class="icon-item">
        <i class="iconfont icon-gerenxinxi"></i>
        <p class="icon-desc">信息真实</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'list',
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      isRotate: false,
      page: 1
    }
  },
  methods: {
    handleRefresh () {
      this.page = this.page === 1 ? 2 : 1
      this.$emit('refresh', this.page)
      this.isRotate = true
      setTimeout(() => {
        this.isRotate = false
      }, 1000)
    },
    handleBorrow () {
      this.$router.push({
        path: '/borrow'
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.home-list
  width 100%
  background-color $common_bgc
  box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)
  border-radius 24px
  margin-bottom 20px

  .list-title
    width 100%
    height 122px
    display flex
    justify-content space-between
    padding-left 30px
    padding-right 30px
    box-sizing border-box

    .title-desc
      display flex
      align-items center
      height 100%

      .icon
        width 60px
        height 59px
        margin-right 16px

      p
        font-size $shop_name
        font-weight 500
        color $id_input

    .refresh
      display flex
      align-items center
      height 100%

      i
        font-size $address
        color #747D8C
        margin-right 16px

      .rotate
        transform-origin center
        transform rotate(360deg) translate3d(0, 0, 0)
        transition all 1s

      p
        font-size $address
        font-weight 500
        color #747D8C

  .list
    width 100%

    .item
      width 100%
      display flex
      justify-content space-between
      align-items center

      .icon-box
        height 122px
        width 105px
        display flex
        justify-content center
        align-items center

        .icon
          width 50px
          height 49px
          opacity 0.8

      .right
        height 122px
        flex 1
        display flex
        justify-content space-between
        align-items center
        font-size $address
        font-weight 400
        color $id_input
        padding-right 32px
        box-sizing border-box

        .rent
          width 152px
          height 52px
          background #F09D02
          border-radius 26px
          color $common_bgc
          text-shadow 0px 2px 2px rgba(47, 53, 66, 0.16)
          text-align center
          line-height 53px

        .rent[border-radius]
          &::before
            content ''
            border-radius 46px
            border-color #F09D02

  .icon-list
    width 100%
    display flex
    justify-content space-between
    align-items center
    padding-left 30px
    padding-right 30px
    box-sizing border-box

    .icon-item
      height 114px
      display flex
      justify-content space-between
      align-items center

      i
        color #747D8C
        font-size $icon_fz
        margin-right 32px

      .icon-desc
        font-size $common_fz
        font-weight 500
        color #747D8C
</style>
